<template>
  <div class="flow-wrap">
    <base-modal
      :title="title"
      width="676px"
      @cancel="closeDialog"
      :show.sync="isShow"
      :mask-closeable="false">
      <div class="add-form">
        <el-form label-position="top" :model="form" :rules="rules" ref="authForm" >
          <el-form-item :label="$t('common.base.roleName')" prop="name">
            <el-input class="w-360" maxlength="10" v-model.trim="form.name" :placeholder="$t('projectManage.setting.authSetting.placeholder1')" show-word-limit></el-input>
          </el-form-item>
          <el-form-item :label="$t('common.base.explain')" prop="description">
            <el-input class="w-360" maxlength="500" type="textarea" v-model="form.description" :placeholder="$t('projectManage.setting.authSetting.placeholder2')" show-word-limit></el-input>
          </el-form-item>
          <el-form-item :label="$t('projectManage.setting.authSetting.authName')" prop="authsList">
            <div class="auth-wrap">
              <el-checkbox v-model="checkAll" @change="handleCheckAllChange">{{$t('common.auth.allPermission')}}</el-checkbox>
                <div style="margin: 10px 0;">{{$t('common.auth.functionPermission')}}</div>
                <el-checkbox-group v-model="form.authsList" @change="handleCheckedauthChange">
                  <el-checkbox 
                    v-for="item in authActionList" 
                    :label="item.id" 
                    :key="item.id">{{item.name}}</el-checkbox>
                </el-checkbox-group>
                <div style="margin: 10px 0;">{{$t('common.auth.dataPermission')}}</div>

                <!-- 个人 1，部门 2， 全部 3 -->
                <div class="auth-item-list" 
                  v-for="(item) in dataAuthList" 
                  :key="item.name">
                  <div class="item-name">{{ item.name }}</div>
                  <el-radio-group v-model="item.depth">
                    <el-radio :label="3">{{$t('projectManage.setting.authSetting.all')}}</el-radio>
                    <el-radio :label="1">{{$t('projectManage.setting.authSetting.personal')}}</el-radio>
                  </el-radio-group>
                </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="closeDialog">{{$t('common.base.cancel')}}</el-button>
        <el-button :loading="pedding" type="primary" @click="submitForm">{{$t('common.base.makeSure')}}</el-button>
      </div>
    </base-modal>
  </div>
</template>
<script>

import _ from 'lodash';
const CreateUuid = () => URL.createObjectURL(new Blob()).substr(-36);

export default {
  name: 'create-auth',
  data() {
    return {
      checkAll: false,
      radio: 3,
      isIndeterminate: true,
      compId: CreateUuid(),
      title: '',
      editloadingShow: false,
      pending: false,
      iframeEditUrl: '',
      form: {
        name: '',
        description: '',
        authsList: [],
        auths: [],
      },
      rules: {
        name: [
          { required: true, message: this.$t('projectManage.setting.authSetting.placeholder1'), trigger: 'blur' },
          { max: 10, message: this.$t('projectManage.setting.projectStatus.ruleMess1'), trigger: 'blur' }
        ],
      },
      pedding: false,
      isShow: false,
      isFormEdit: false,
      authIdsList: [], // 所有选中的id列表
    }
  },
  props: {
    authActionList: {
      type: Array,
      default: () => []
    },
    dataAuthList: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
   
  },
  methods: {
    handleCheckedauthChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.authIdsList.length;
    },
    handleCheckAllChange(val) {
      this.form.authsList = val ? this.authIdsList : [];
      this.checkAll = val
    },
 
    openDialog(defaultForm, isEdit) {
      this.isFormEdit = isEdit
      // 所有权限按钮的id集合
      this.authIdsList = this.authActionList.map((item) => item.id)
      if (isEdit) {
        this.title = this.$t('projectManage.setting.authSetting.editBtn')
        this.$set(this, 'form', _.cloneDeep(defaultForm))
        let selectId = this.form.auths.map((item) => item.id) || []
        this.$set(this.form, 'authsList', selectId)

        // 如果id长度和返回列表的长度一样，就全选
        this.checkAll = (this.authIdsList.length === this.form.authsList.length)
      } else {
        this.title = this.$t('projectManage.setting.authSetting.createBtn')
        this.$set(this, 'form', {})
        this.checkAll = false
        this.$set(this.form, 'authsList', [])
      }
      
      this.$refs['authForm'].resetFields();
      this.isShow = true
    },
    closeDialog() {
      this.isShow = false
    },
    submitForm() {

      if(!this.form.authsList.length) {
        this.$message.error(this.$t('common.placeholder.allotPermission'))
        return
      } 
      this.pedding = true
      this.$refs['authForm'].validate((valid) => {
        if (valid) {
          this.pedding = false
          // 如果功能权限不选择，下面对应的数据权限选中的话，接口不传数据
          let seletedList = this.form.authsList.map((item) => {
            return {
              id: item,
              depth: 0
            }
          })
          // 接口返回的  重新赋值
          if (this.form.auths) {
            seletedList.map((ele) => {
              this.form.auths.map((item) => {
                if (ele.id === item.id) {
                  ele.depth = item.depth
                }
              })
            })
          }

          // 重新赋值数据权限选中的值
          seletedList.map((item) => {
            this.dataAuthList.map((ele) => {
              if (item.id === ele.id)  {
                item.depth = ele.depth
              }
            })
          })

          this.form.auths = seletedList || []
          this.$emit('submit', _.cloneDeep(this.form), this.isFormEdit)
        } else {
          this.pedding = false
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>
<style lang="scss">
.add-form{
    padding: 20px;
    position: relative;
    // 解决显示输入限制右边的边框样式出错
    ::v-deep .el-input__suffix {
      right: 1px;
    }
    .w-100 {
      width: 100%;
    }
    ul.statecolor{
        padding: 0;
        line-height: 22px;
        display: flex;
        justify-content:space-between;
        li{
            list-style: none;
            display: inline-block;
            cursor: pointer;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            vertical-align: middle;
            position: relative;
            i{
                position: absolute;
                font-weight: bold;
                left: 50%;
                top: 50%;
                color: #fff;
                transform: translate(-50%, -50%);
            }
        }
    }
    .auth-wrap {
      margin: -32px 0 0 60px;
    }
    .auth-item-list {
      display: flex;
      align-items: center;
      .item-name {
        width: 100px;
      }
      .el-radio {
          margin-right: 56px;
        }
    }
}
</style>